<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
            display: none;
        }
    </style>
    <script src="jquery.3.4.1.js"></script>
</head>
<body>
    <button>显示</button>
    <div></div>
</body>
<script>
    // fadeIn fadeOut
    $('button').click(
        function () {
            $('div').stop()
            if($('button').text()==='显示'){
                $('button').text('隐藏')
            }else{
                $('button').text('显示')
            }
            $('div').fadeToggle(2000)
        }
    )


    // show hide toggle
    // $('button').click(
    //     function () {
    //         $('div').stop()
    //         if($('button').text()==='显示'){
    //             $('button').text('隐藏')
    //         }else{
    //             $('button').text('显示')
    //         }
    //         $('div').toggle(2000)
    //         // $('div').toggle(2000,fn)
    //     }
    // )
    // function fn() {
    //     if($('button').text()==='显示'){
    //         $('button').text('隐藏')
    //     }else{
    //         $('button').text('显示')
    //     }
    // }
</script>
</html>